<template>
  <div>
    <el-menu class="el-menu-demo header" :style="opacityStyle" mode="horizontal" :background-color="bgc"
      text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="0" class="login">登录</el-menu-item>
      <el-menu-item v-for="item in titleList" :key="item.index" @click="sendkey(item.key)">{{item.name}}</el-menu-item>
      <el-menu-item class="brand" @click="homepage">首页</el-menu-item>
    </el-menu>
  </div>

</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      headershow: false,
      headercontent: true,
      opacityStyle: {
        opacity: 1
      },
      bgc: 'transparent',
      activeIndex2: '1',
      titleList: [{
        index: 1,
        name: '关于我们',
        key: 'about'
      }, {
        index: 2,
        name: '留言',
        key: 'about'
      }, {
        index: 3,
        name: '新闻&公告',
        key: ''
      }, {
        index: 4,
        name: '开放资源',
        key: ''
      }, {
        index: 5,
        name: '专家库',
        key: 'team'
      }, {
        index: 6,
        name: '成功案例',
        key: 'success'
      }, {
        index: 7,
        name: '服务领域',
        key: 'service'
      }]
    }
  },
  methods: {
    getTop () {
      const top = document.documentElement.scrollTop
      if (top > 50) {
        this.bgc = '#545c64'
        let opacity = top / 200
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
      } else {
        this.bgc = 'transparent'
        let opacity = 1
        this.opacityStyle = { opacity }
      }
    },
    sendkey (key) {
      this.$emit('getkey', key)
    },
    homepage () {
      this.$emit('gethome', 'home')
    }
  },
  activated () {
    window.addEventListener('scroll', this.getTop)
  }
}
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  font-weight: bold;
}
.el-menu-item {
  font-size: 16.5px;
}
.el-menu--horizontal > .el-menu-item {
  float: right;
}
.el-menu--horizontal > .el-submenu {
  float: right;
}
.brand {
  font-size: 20px;
  font-weight: normal;
}
el-menu {
  padding-right: 50px;
}
</style>
